<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_制作网页固定广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5aa4ae;
            position:fixed;
            width: 100vw;
            font-size: 30px;
            color: #fff;
            top: 0;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200vh;
            position:fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是右侧部分</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis corporis distinctio enim error
            excepturi id illum, inventore maxime nisi nostrum obcaecati odit praesentium quae quo repellat sapiente sit
            temporibus ut.
        </div>
        <div>Architecto consectetur consequatur cum cumque dignissimos dolorem ea eveniet excepturi illum in ipsam modi
            nam non nostrum omnis perspiciatis quaerat quidem quod reprehenderit rerum sapiente similique sit tenetur
            totam, voluptatem?
        </div>
        <div>Aliquid atque cum cumque dicta doloremque enim error et, eum ipsum labore, laudantium maiores molestiae
            odit omnis perspiciatis quas quidem quisquam quo soluta suscipit veritatis vero vitae. Dolore nesciunt,
            recusandae?
        </div>
        <div>Accusamus accusantium adipisci, aperiam autem consequatur consequuntur ducimus eligendi enim expedita ipsam
            iusto nobis optio quae quo recusandae sapiente temporibus, voluptas voluptatibus? Aperiam eaque earum error
            ipsam nihil sapiente tempora!
        </div>
        <div>Deserunt doloribus explicabo iure libero molestias mollitia natus non numquam placeat porro sint, tempora
            voluptas voluptatibus. Ab doloremque, eveniet facere laboriosam laudantium maiores nam nobis, pariatur
            possimus quas sed temporibus.
        </div>
        <div>Amet aut consectetur deserunt dolorem expedita illum maxime modi nam numquam provident, quam qui
            repudiandae saepe sequi soluta tempora vel velit. Cum eveniet iure labore laudantium nesciunt quos
            repudiandae tenetur.
        </div>
        <div>A at autem et eum harum illum ipsum labore laboriosam laudantium magni necessitatibus neque nulla numquam
            porro possimus provident quasi rerum saepe, sapiente sequi tenetur unde voluptates voluptatum? Dignissimos,
            maxime.
        </div>
        <div>Ad adipisci alias, consequuntur corporis cum ex exercitationem, explicabo fuga inventore maiores odit
            quaerat quam quis quisquam ratione rem repudiandae sequi, ullam ut vel. Cum cumque quae quasi quia veniam.
        </div>
        <div>Accusantium consequatur cumque dolore, eius, eos error excepturi exercitationem facilis harum ipsam
            molestias neque nobis obcaecati optio perferendis, quos repellat repudiandae rerum totam velit. Earum iure
            libero natus praesentium ullam.
        </div>
        <div>Ab consequatur culpa ea eius et, ex, expedita fuga iure necessitatibus neque officiis pariatur quae quod,
            reiciendis sapiente. Aperiam incidunt magnam molestias neque nostrum omnis. Excepturi facere minus officiis
            possimus!
        </div>
        <div>Cumque est optio repellat sit! Adipisci aspernatur cupiditate dolor doloribus ea eos in ipsam laudantium
            odio pariatur quaerat, reiciendis tenetur! Ad dolorum ea magnam nulla qui quia ullam vero voluptas.
        </div>
        <div>Eum harum impedit molestiae natus nesciunt obcaecati quibusdam quod saepe soluta, totam. A accusamus atque,
            deleniti distinctio esse ex minima odit perspiciatis repellendus veniam. Eos exercitationem in odio quis
            sunt!
        </div>
        <div>Animi beatae consequuntur, culpa dolores eaque earum, eligendi facilis fugit impedit itaque iure magnam
            molestias nostrum odit pariatur porro provident, quaerat quo quod repellendus? Dolorem earum eligendi nobis
            praesentium sequi.
        </div>
        <div>Aperiam commodi cupiditate doloremque, exercitationem illum ipsa ipsam, modi provident quas quasi
            reprehenderit sunt? At deserunt fuga impedit minus natus, nesciunt nulla odio odit perspiciatis provident,
            quo similique suscipit veniam?
        </div>
        <div>A ad alias animi atque consequatur consequuntur distinctio dolore earum esse harum illum in inventore,
            ipsum laborum, nemo non numquam officia pariatur, possimus quas quod reiciendis similique suscipit ut
            voluptatibus.
        </div>
        <div>Ducimus minus nesciunt nisi quae quaerat. At distinctio dolorem earum, ex fugit id illum ipsam, libero,
            magnam maxime modi necessitatibus neque obcaecati odit temporibus ullam ut? Dicta iusto laudantium quis?
        </div>
        <div>Eligendi esse inventore modi molestiae quam, sequi tempora. Asperiores culpa cupiditate eligendi error eum
            exercitationem modi quisquam? Architecto, beatae commodi culpa, cumque eaque, nobis pariatur possimus
            ratione recusandae sequi vel.
        </div>
        <div>Ab aliquid aperiam architecto, beatae dolor doloremque eligendi eos expedita fugit impedit incidunt ipsa
            laborum laudantium, maxime modi obcaecati odit optio placeat porro quae quibusdam quod recusandae velit
            veniam vero!
        </div>
        <div>Est eveniet explicabo illum inventore labore molestias nihil qui quibusdam quo sint, sit tempora tenetur
            ullam. Ad, consequuntur culpa dicta doloremque iste itaque nisi quas quod saepe ut veniam voluptatem!
        </div>
        <div>A aliquam aperiam blanditiis ducimus, eos explicabo fuga, illum magnam, nihil officia repellendus sint
            tempora unde vel veritatis. Ad aspernatur consequuntur cupiditate dolor illo impedit magnam modi nobis
            possimus recusandae.
        </div>
        <div>Asperiores aspernatur assumenda commodi delectus dolore doloribus eaque eius facere fugit, id labore
            laborum libero magnam molestiae neque, quam qui quia quibusdam quis quod rem sint velit vero voluptates
            voluptatum?
        </div>
        <div>Aliquam aliquid consequuntur debitis delectus doloremque eligendi esse facilis fugit illum in inventore
            laboriosam laudantium maxime molestiae omnis porro possimus quis quod, repellendus saepe sunt tempora
            tempore voluptas. Culpa, eum!
        </div>
        <div>At distinctio doloremque expedita illo illum laborum minus nam, nobis, officiis omnis quasi saepe similique
            voluptas voluptatem voluptatibus? Consequuntur dolores hic ipsam labore laudantium odio omnis optio quas
            sapiente suscipit.
        </div>
        <div>At deserunt doloribus expedita illo impedit magni pariatur repellendus. Consequatur cumque delectus
            deserunt dolore, est nemo possimus quidem totam voluptates. Autem eligendi eos expedita illo, impedit
            nostrum nulla quidem voluptates.
        </div>
        <div>Ab, consequatur veritatis? A corporis cupiditate delectus ea earum eveniet excepturi hic id illo laudantium
            obcaecati provident quam quisquam ratione, repellat repellendus sequi similique sint tenetur totam, unde ut
            vel!
        </div>
        <div>Adipisci deserunt dolorem, doloribus ducimus eos et expedita fuga impedit, nesciunt pariatur perspiciatis
            provident quasi qui quia repellendus tenetur ut? Adipisci amet consequatur doloribus eos quidem quos
            repudiandae saepe ullam?
        </div>
        <div>Aliquam corporis explicabo hic laboriosam maiores modi mollitia optio pariatur, quos, ratione reiciendis,
            repudiandae sed similique tenetur velit? Aliquid autem, corporis culpa deleniti distinctio iure iusto
            mollitia odit officia sint.
        </div>
        <div>Asperiores, consequatur delectus distinctio doloremque earum fugiat laboriosam molestias nemo odit
            perspiciatis praesentium, recusandae, sapiente sunt! Asperiores autem blanditiis cumque, esse excepturi
            laudantium magnam minus pariatur soluta? Dolor, expedita, saepe!
        </div>
        <div>Nihil recusandae sint ut? Adipisci cupiditate delectus doloribus ea error exercitationem, incidunt ipsa
            maiores modi, mollitia nemo nesciunt obcaecati perferendis provident quia quibusdam quis reprehenderit rerum
            saepe sit, voluptas voluptate!
        </div>
        <div>Atque, mollitia, pariatur? Aliquid, cupiditate dolores eos illo maiores modi officia reiciendis. Aperiam
            assumenda aut dolorum ex hic illo ipsa laborum, maxime neque nisi quia sed unde velit voluptatem
            voluptatibus?
        </div>
        <div>Accusantium amet aperiam culpa distinctio ex in inventore, mollitia nostrum qui quisquam. Amet aut, commodi
            corporis error in laboriosam laudantium nobis numquam placeat quam quas quod temporibus ullam vel voluptas.
        </div>
        <div>Blanditiis enim expedita illum impedit iste maiores, nemo nihil quo! Dignissimos excepturi praesentium
            provident quas sit veritatis! Ad, aliquam aliquid dignissimos ex nulla perferendis qui quibusdam reiciendis
            suscipit tempore voluptatum.
        </div>
        <div>Atque, consequuntur delectus dolorem doloremque dolorum eaque error, explicabo harum impedit in
            necessitatibus quaerat quo recusandae rerum suscipit ullam vero! Consequuntur cupiditate exercitationem fuga
            illum officiis ratione tempora ut vero?
        </div>
        <div>At beatae eius eos id minima, necessitatibus nemo, officiis pariatur, perspiciatis repellat reprehenderit
            sed unde! Ducimus est excepturi incidunt perferendis porro repellat suscipit vero. Iusto nihil nobis quam
            ullam vero.
        </div>
        <div>Ad animi consequuntur distinctio dolore ducimus eius, eum, exercitationem expedita fuga iste qui sapiente
            sunt tempore totam voluptate! Ab aliquid aspernatur eum facilis incidunt obcaecati officia quidem quis quo
            veniam.
        </div>
        <div>Beatae delectus dolorum error exercitationem facere quaerat repudiandae tempora veritatis. A aliquid
            consequuntur cumque eius facere, harum incidunt laboriosam maiores minima modi neque obcaecati optio quasi,
            quo quod, sunt voluptatum?
        </div>
        <div>A ab cupiditate dolore dolorem eaque eligendi esse eum fuga incidunt laborum, magnam magni minus, nobis non
            obcaecati omnis placeat quam ratione sed sequi soluta ullam unde vitae voluptatem voluptatibus.
        </div>
        <div>Assumenda beatae dicta, et laboriosam officiis possimus quibusdam soluta. Adipisci aut deserunt, ducimus
            eligendi et ex odio optio pariatur suscipit veniam. Dolores earum fugiat necessitatibus, placeat quisquam
            saepe sequi. Perferendis!
        </div>
        <div>Aspernatur, assumenda dolores excepturi, fuga fugiat mollitia nisi odit pariatur quisquam quo reiciendis
            soluta tempora voluptate. Ad alias debitis doloremque expedita harum, incidunt itaque nobis non, praesentium
            quaerat qui voluptatibus.
        </div>
        <div>A autem cum inventore laudantium, magnam modi nobis possimus praesentium quibusdam sint tempore temporibus
            velit vero. Delectus, dolores et exercitationem harum ipsam iusto officiis, pariatur perferendis sequi sint
            sit totam.
        </div>
        <div>Aperiam autem consequatur dignissimos dolorum et exercitationem facere tempora unde voluptatibus! Adipisci
            assumenda dicta est expedita explicabo hic ipsa, laboriosam nisi odio, pariatur quaerat ratione soluta
            ullam. Asperiores, corporis placeat!
        </div>
        <div>A dolorum exercitationem ipsum, labore laboriosam laborum magnam molestiae nulla quo voluptatum! Aliquam
            consequatur delectus dolor dolore eligendi exercitationem, hic laboriosam laborum minima officia officiis
            quasi saepe, sunt tempora, voluptatum.
        </div>
        <div>A autem consequuntur quia rem voluptates. A accusantium at commodi consectetur culpa dolores fuga
            laudantium minus natus nesciunt odio odit provident quae quidem repellat saepe, suscipit tempore temporibus
            unde voluptatum.
        </div>
        <div>Aliquid aspernatur aut beatae consequatur consequuntur, eius eum fuga hic impedit iusto laboriosam,
            molestiae necessitatibus nemo nihil nisi odit optio quidem quis quod sit tempore temporibus tenetur vel
            vitae voluptatum.
        </div>
        <div>Commodi eligendi enim, ipsum itaque natus odit perspiciatis rem vero. Accusamus cum dignissimos dolor
            doloribus, eaque facilis laborum nemo numquam odio officia officiis optio placeat quos recusandae tempora
            temporibus ullam.
        </div>
        <div>Atque commodi delectus dicta dolorem doloremque error est et ex exercitationem expedita facilis hic iusto
            maiores molestias nemo nihil, odio qui repudiandae rerum similique tempora temporibus totam ullam voluptatem
            voluptatum.
        </div>
        <div>Aliquid animi aperiam aspernatur autem beatae cum debitis deleniti eligendi error id impedit, incidunt
            magni nemo officia quam quasi quia quibusdam recusandae sequi sit sunt, suscipit temporibus vel. Aperiam,
            quasi.
        </div>
        <div>Animi eaque error ipsum iure nemo pariatur repellat soluta totam? Aliquam, officiis temporibus? Alias
            deleniti fugit ipsa, iure odio quas rem? Adipisci commodi cumque dolores hic in nemo sunt ullam?
        </div>
        <div>Aliquid aspernatur blanditiis debitis dicta esse et exercitationem facilis, fugiat fugit ipsa magnam
            maiores mollitia natus numquam odio odit quas quibusdam rem reprehenderit repudiandae soluta sunt suscipit
            tempora totam voluptate?
        </div>
        <div>Animi aspernatur assumenda at aut cum dolores, eaque ex expedita fugit ipsum itaque laudantium libero quos
            soluta tenetur ullam veritatis. Accusamus accusantium adipisci alias incidunt inventore laborum modi veniam
            voluptatibus.
        </div>
        <div>Assumenda culpa earum eius molestiae officiis repudiandae rerum sunt voluptates. Consectetur ea quibusdam
            quo sapiente velit? Adipisci debitis distinctio eos magnam maiores, non placeat quos reprehenderit, sint,
            tempora ut velit.
        </div>
        <div>Ad amet corporis cumque dicta, distinctio, dolore dolorem est et eum eveniet fugiat fugit illo libero natus
            nemo neque numquam odio officiis pariatur perferendis perspiciatis quam quod sapiente voluptates voluptatum?
        </div>
        <div>Autem doloremque doloribus, earum eveniet non quisquam quo ratione sint ut veniam! Distinctio dolor eaque
            est eveniet facere illo iusto magni maiores, molestias, placeat, quam qui repudiandae suscipit ut
            voluptatum?
        </div>
        <div>Aliquam asperiores at cum deserunt dolorem hic id illum ipsa maiores minima non nostrum quidem quos rem
            reprehenderit rerum saepe sapiente veritatis vero, voluptate! Deserunt est harum nisi officia repellat.
        </div>
        <div>Ad, placeat veritatis! Accusamus, blanditiis error obcaecati odio praesentium tempore! Eaque fugit maxime
            pariatur. Aspernatur, cumque debitis delectus dolor eius fugit incidunt maxime necessitatibus nemo
            voluptatum. Hic magnam quis quos?
        </div>
        <div>Eaque libero neque optio, placeat porro quasi quisquam rem sint. Alias aliquid amet deleniti dolores esse
            minus, mollitia numquam officia perspiciatis quas qui repellat sint vel voluptatibus voluptatum? Mollitia,
            omnis.
        </div>
        <div>A adipisci ea harum itaque nemo, nisi quibusdam! A animi autem blanditiis, deserunt dolor ea esse ipsum
            labore laborum molestias mollitia nam, numquam omnis quam rerum veniam, veritatis vitae voluptates.
        </div>
        <div>Commodi consequatur dicta doloremque est omnis provident reiciendis sit. Aliquid consectetur corporis cum
            doloremque eligendi magnam quasi sint tenetur. Ea explicabo ipsam itaque odio perferendis repudiandae
            voluptate. Officia quaerat, tempora!
        </div>
        <div>Aperiam, blanditiis, consequatur cumque doloribus eligendi, eum itaque non nulla officiis quaerat ut
            voluptas voluptatum. Ad dignissimos quisquam repellendus temporibus? Autem fugiat illo necessitatibus nobis
            non officia sapiente totam voluptas?
        </div>
        <div>Aspernatur corporis cumque dolore ipsa minima modi, non placeat quam quos recusandae? Cupiditate dolore
            neque quo vitae! Assumenda consequuntur dicta eum eveniet, ex, molestiae mollitia nihil perferendis, soluta
            temporibus velit.
        </div>
    </div>

</body>
</html>